<template>
	<router-view v-slot="{ Component }">
		<transition :name="routerTrans" :mode="defaultMode">
			<keep-alive :include="keepAliveList">
				<component :is="Component" />
			</keep-alive>
		</transition>
	</router-view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, onUnmounted } from "vue";
import mitter from "@/plugins/mitt";
import { useStore } from "@/store";
import { useTabs } from "@/hooks";
import type { RouterTrans } from "@/model/store";

const store = useStore();
const { keepList, activeList } = useTabs();

// 过滤的缓存组件名称
const notKeepAlivePath = ref("");

const keepAliveList = computed(() => {
	return [...keepList.value, ...activeList.value]
		.filter(item => {
			return item.keepAlive && item.name !== notKeepAlivePath.value;
		})
		.map(item => item.name);
});

const routerTrans = computed<RouterTrans>(() => store.getters["setting/routerTrans"]);
const defaultMode = computed<"default" | "out-in" | "in-out" | undefined>(() =>
	routerTrans.value !== "slide" ? "out-in" : "default",
);

onMounted(() => {
	mitter.$on("removeKeepAlive", value => {
		notKeepAlivePath.value = value as string;
	});
});

onUnmounted(() => {
	mitter.$off("removeKeepAlive");
});
</script>
